<template>
	<view class="count-wrapper">
		<top-nav>
			<view class="top-nav-content">
				<view class="logo"></view>
				<view class="title">阿拉丁神灯</view>
			</view>
		</top-nav>
		<u-notice-bar v-show="noticeShow" mode="horizontal" :close-icon="true" color="#FFB721" font-size="30" bg-color="#4B4B4B" :is-circular="false" :list="['公告正文内容不超过一行']" @close="noticeShow=false"></u-notice-bar>
		<view class="button-group-wrapper">
			<view class="btn-list" :class="actived==1?'actived':''" @click="btnFun(1)">动力池</view>
			<view class="btn-list" :class="actived==2?'actived':''" @click="btnFun(2)">平衡池</view>
			<view class="btn-list" :class="actived==3?'actived':''" @click="btnFun(3)">幸运池</view>
		</view>
		<view class="all-data">
			<view class="left">账户详情</view>
			<view class="right" @click="gotoDetailFun">
				<view class="text">查看详情</view>
				<view class="icon"></view>
			</view>
		</view>
		<view class="all-count">
			<view class="rmb">¥{{priceText}}</view>
			<view class="my">(${{priceText}})</view>
		</view>
		<view class="curve-wrapper">
			<curve :chartData="chartData"></curve>
		</view>
		<u-toast ref="uToast" />
		<bottom-nav :currentIndex="1"></bottom-nav>
	</view>
</template>

<script>
	import topNav from '../../components/top-nav/top-vue.vue';
	import bottomNav from '../../components/bottom-nav/bottom-nav.vue';
	import myButton from '../login/components/button.vue';
	import curve from '../../components/curve/curve.vue'
	export default{
		data(){
			return {
				priceText:'',
				actived:1,
				noticeShow: true,
				chartData:{
					x:[],
					y:[]
				}
			}
		},
		created(){
			this.getData(1)
		},
		components:{
			topNav:topNav,
			bottomNav:bottomNav,
			myButton:myButton,
			curve: curve
		},
		methods:{
			getData(){
				this.$u.post('/api/myAssets', {account_id:uni.getStorageSync('account_id'),source:this.actived}).then(res=>{
					if(res.code==200){
						this.priceText = this.fmoney(res.data.assets);
						this.chartData = {
							x:res.data.chart.X,
							y:res.data.chart.Y
						}
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			fmoney(s, n) {
				 n = n > 0 && n <= 20 ? n : 2;  
				   s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";  
				   var l = s.split(".")[0].split("").reverse(),  
				   r = s.split(".")[1],
				   t = "";  
				   for(var i = 0; i < l.length; i ++ )  
				   {  
				      t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");  
				   }  
				return t.split("").reverse().join("") + "." + r;  
			},
			clickFun(){
				this.$refs.uToast.show({
					title: '点击了确定',
					type: 'success',
				})
			},
			btnFun(i){
				this.actived = i;
				this.getData()
			},
			gotoDetailFun(){
				uni.navigateTo({
				    url: `/pages/count/detail?source=${this.actived}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.count-wrapper{
		margin-bottom:140rpx;
	}
	.top-nav-content{
		width:100%;
		display: flex;
		align-items: center;
		position:relative;
		.title{
			flex:1;
			text-align: center;
		}
		.logo{
			width:30*2rpx;
			height:30*2rpx;
			border-radius: 50%;
			border:2px solid #EEEEEE;
			margin-left:40rpx;
			position:absolute;
			top:50%;
			transform: translateY(-30rpx);
			background-repeat: no-repeat;
			background-color: #69DA73;
			background-image: url('/static/home/logo.png');
			background-position: center center;
			background-size: 20*2rpx;
		}
	}
	.button-group-wrapper{
		margin:40*2rpx 20*2rpx;
		display: flex;
		background-color: #353535;
		border-radius: 7*2rpx;
		.btn-list{
			border-radius: 7*2rpx;
			flex:1;
			height: 45*2rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size:12*2rpx;
			&.actived{
				background: #69DA73;
				box-shadow: 0px 7px 14px -10px rgba(0, 0, 0, 0.5);
			}
		}
	}
	.all-data{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 20*2rpx;
		.left{
			font-size:24*2rpx;
		}
		.right{
			display: flex;
			align-items: center;
			font-size:12*2rpx;
			.icon{
				width: 0;
				height: 0;
				border-top: 10rpx solid transparent;
				border-left: 12rpx solid #FFFFFF;
				border-bottom:10rpx solid transparent;
				margin:0 10rpx;
			}
		}
	}
	.all-count{
		margin-top:33*2rpx;
		padding:0 20*2rpx;
		.rmb{
			font-size: 48*2rpx;
			display: inline-block;
		}
		.my{
			font-size:12*2rpx;
			display: inline-block;
			opacity: 0.6;
			margin-left:20rpx;
		}
	}
	.curve-wrapper{
		margin:200rpx auto 130rpx;
	}
</style>
